<template>
    <div>
        <el-form :inline="true" :model="parameters" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="parameters.name" placeholder="用户名称"  @keyup.enter.native="getUserList()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserList()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="ID"
            width="79" align="center">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户名称">
            </el-table-column>
            <el-table-column
            prop="roleName"
            label="角色名称">
                <template slot-scope="scope">
                    <el-tag size="small" v-for="item in scope.row.roleList">
                        {{item.roleName}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱">
            </el-table-column>
            <el-table-column
            prop="status"
            label="账号状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state === true" type="success">正常</el-tag>
                    <el-tag v-else-if="scope.row.state === false" type="danger">注销</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            prop="operation"
            label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="setCheckedKeys(scope.row.id)">分配角色</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="getUserInfo(scope.row.id)">编辑</el-button>
                    <!-- <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="delUser(scope.row.id)">注销</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="currentSize"
            @current-change="currPage"
            :pager-count="5"
            :page-size="parameters.pageSize"
            :page-sizes="[5, 10, 15]"
            :current-page="parameters.currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <el-dialog title="编辑" :visible.sync="editDialogForm" :append-to-body="true" :close-on-click-modal="false" width="500px">
            <el-form :model="editForm" ref="editForm" :rules="rules">
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="editForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="editForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="账号状态" :label-width="formLabelWidth" prop="state">
                    <el-radio-group v-model="editForm.state">
                        <el-radio :label=true>正常</el-radio>
                        <el-radio :label=false>注销</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="updateUser()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="分配角色" :visible.sync="addDialogForm" :append-to-body="true" :close-on-click-modal="false" width="500px">
            <el-form :model="addForm">
                <el-tree
                    :data="treeData"
                    show-checkbox
                    ref="tree"
                    node-key="id"
                    :default-expand-all="true"
                    :props="defaultProps">
                </el-tree>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogForm = false">取 消</el-button>
                <el-button type="primary" @click="assignRole()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            total: 5,
            formLabelWidth: '80px',
            parameters: {
                name: '',
                pageSize: 5,
                currentPage: 1
            },
            editDialogForm: false,
            editForm: {},
            rules: {
                username: [
                    { required: true, message: '用户名字不能为空', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur'},
                    { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式' }
                ],
                state: [
                    { required: true, message: '请选择账号状态', trigger: 'change' }
                ]
            },
            addDialogForm: false,
            treeData: [],
            addForm: {},
            defaultProps: {
                label: 'roleName'
            }
        }
    },
    methods: {
        getUserList() {
            this.$axios.post('user/list', this.parameters).then(response => {
                this.tableData = response.data.data
                this.total = response.data.data.length
            })
        },
        currentSize(newSize) {
            this.parameters.pageSize = newSize
            this.getUserList()
        },
        currPage(newPage) {
            this.parameters.currentPage = newPage
            this.getUserList()
        },
        getUserInfo(id) {
            this.$axios.get('user/info/' + id).then(response => {
                if (response.data.code === 200) {
                    this.editForm = response.data.data
                    this.editDialogForm = true
                }
            })
        },
        updateUser() {
            this.$refs.editForm.validate(valid => {
                if (!valid) return
                this.$axios.post('user/updateUser',this.editForm).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message)
                        this.editDialogForm = false
                        this.getUserList()
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            })
        },  
        // delUser(id) {
        //     this.$confirm('确定注销该角色?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.$axios.get('user/delUser/' + id).then(response => {
        //             if (response.data.code === 200) {
        //                 this.$message.success(response.data.message)
        //                 this.getUserList()
        //             } else {
        //                 this.$message.error(response.data.message)
        //             }
        //         })           
        //     }).catch(() => {});
        // },
        setCheckedKeys(id) {
            this.addDialogForm = true
            this.$axios.get('user/getUserRole/' + id).then(res => {
                this.$refs.tree.setCheckedKeys(res.data.data.roleId)
                this.addForm = res.data.data
            })
        },
        getTreeData() {
            this.$axios.get('user/getTreeData').then(res => {
                this.treeData = res.data.data
            })
        },
        assignRole() {
            var roleIds = this.$refs.tree.getCheckedKeys()
            this.$axios.post('user/assignRole/' + this.addForm.id,roleIds).then(res => {
                if (res.data.code === 200) {
                    this.addDialogForm = false
                    this.$message.success(res.data.message)
                    this.getUserList()
                    if (res.data.data) {
                        let timer = setTimeout(() => {
                            //需要定时执行的代码
                            this.loginOut()
                            this.$message.warning('当前用户角色发生变化,请重新登录')
                        },2000)
                    }
                } else {
                    this.$message.error(res.data.message)
                }
            })
        },
        loginOut() {
            this.$axios.get('user/logout').then(response => {
                if (response.data.code === 200) {
                    window.localStorage.removeItem('token')
                    window.sessionStorage.removeItem('userInfo')
                    this.$router.push('/login')
                }
            })
        }
    },
    created() {
        this.getUserList()
        this.getTreeData()
    }
}
</script>

<style scpoed>
</style>